<template>
    <div>
        <van-row class="editor-box-tit background-fff">
            <van-col span="8">
                <img class="center-jt" src="../../assets/image/center/icon_return.png" alt="" @click="returnParent()">
            </van-col>
            <van-col span="8" class="text-align-c color-3 font-3">
                身份认证
            </van-col>
            <van-col span="8" class="text-align-r color-3 font-2">
                <span class="wancheng"></span>
            </van-col>
        </van-row>
        <div class="identity-box">
            <div class="clearfix">
                    <span class="identity1 position-r">      <!-- @click="popupXj = !popupXj" -->
                    <img v-if="img1 == ''||img1==null||img1==undefined" src="../../assets/image/center/img_frontage.png" alt="" srcset="">
                    <img v-else :src="$imgPath(img1)" alt="" srcset="">
                    <img class="zxj" src="../../assets/image/center/icon_upload2.png" alt="" srcset="">
                    <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput1" @change="changeImage(1)">
                </span>
                <span class="zhengmian color-6 text-align-c font-28">点击身份证正面上传</span>
            </div>
            <div class="clearfix">
                <span class="identity1 position-r">
                    <img v-if="img2 == ''||img2==null||img2==undefined" src="../../assets/image/center/img_wrong side.png" alt="" srcset="">
                    <img v-else :src="$imgPath(img2)" alt="" srcset="">
                    <img class="zxj" src="../../assets/image/center/icon_upload2.png" alt="" srcset="">
                    <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" value="11111" ref="avatarInput2" @change="changeImage(2)">
                </span>
                <span class="zhengmian color-6 text-align-c font-28">点击身份证反面上传</span>
            </div>
            <span class="zhengmian1 color-6 text-align-l font-2">1、请严格按照照示例图上传；</span>
            <span class="zhengmian1 color-6 text-align-l font-2">2、确保四角对齐，信息完整，如模糊、反光、太暗、有遮挡，则不予认证；</span>
            <span class="identity1 position-r" style="margin-top:.5rem;">
                <img v-if="img3 == ''||img3==null||img3==undefined" src="../../assets/image/center/img_hand.png" alt="" srcset="">
                 <img v-else :src="$imgPath(img3)" alt="" srcset="">
                <img class="zxj" src="../../assets/image/center/icon_upload2.png" alt="" srcset="">
                 <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" value="11111" ref="avatarInput3" @change="changeImage(3)">
            </span>
            <span class="zhengmian color-6 text-align-c font-28">手持身份证照片</span>
            <span class="zhengmian1 color-6 text-align-l font-2">1、请保证人脸清晰，且全脸在画面中；</span>
            <span class="zhengmian1 color-6 text-align-l font-2">2、请确保身份证信息清晰可见，无遮拦；</span>
            
        </div>
        <van-tabbar>
            <span class="fabu-dynamic text-align-c" @click="card()">提交审核</span>
        </van-tabbar>
        <van-popup v-model="popupXj" position="bottom">
            <span class="xiangji" @click="captureImage()">拍照</span>
            <span class="xiangji" @click="galleryImg()">相册</span>
        </van-popup>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
export default {
    data(){
        return{
            img1:'',
            img2:'',
            img3:'',
            files:[],
            popupXj:false,
            file1:''
        }
    },

    mounted(){
        this.getUserIdentityAuth();
    },
    methods:{
        getUserIdentityAuth(){
            let that = this;
            apiHttp.apiSetting.getUserIdentityAuth('','',resp=>{
                if(resp.code==200){
                    that.img1=resp.data.idFrontPic;
                    that.img2=resp.data.idReversePic;
                    that.img3=resp.data.idHandPic;
                }
            });
        },
        // 上传图片
        changeImage(type){
            let fd = new FormData()
            fd.append('model','user/auth')
            if (this.$refs.avatarInput1.files.length !== 0 && type == 1) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }else if(this.$refs.avatarInput2.files.length !== 0 && type == 2){
                fd.append('file', this.$refs.avatarInput2.files[0])
            }else{
                fd.append('file', this.$refs.avatarInput3.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200 && type == 1){
                    this.img1 = resp.data.url
                }else if(resp.code == 200 && type == 2){
                    this.img2 = resp.data.url

                }else if(resp.code == 200 && type == 3){
                    this.img3 = resp.data.url

                }else{
                    Toast(resp.message)
                }
            })
        },
        // 身份认证
        card(){
            if(this.img1==""||this.img1==null||this.img1==undefined){
                Toast('请上传正面照');
                return;
            }
            if(this.img1==""||this.img1==null||this.img1==undefined){
                Toast('请上传反面照');
                return;
            }

            if(this.img3==""||this.img3==null||this.img3==undefined){
                Toast('请上传手持身份证照');
                return;
            }
           let that = this;
           let data={
               idFrontPic:this.img1,//正面照
               idReversePic:this.img2,//反面照
               idHandPic:this.img3//手持身份证照
           }
            apiHttp.apiCenter.addUserIdentityAuth(data,resp=>{
                if(resp.code == 200){
                    Toast('认证提交成功，请您耐心等待');
                    this.$router.push({
                        path:'setting'
                    })
                }else{
                    Toast(resp.message)
                }
            })
        },
        // 相册
        galleryImg(){
            let self = this
            plus.gallery.pick(function(path){
                self.popupXj = !self.popupXj
                // self.file1 = path
                self.img1 = path
                Toast(self.img1)
            },function(e){
                Toast('取消选择图片')
            },{filter:"image"})
        },
        // 照相机
        captureImage(){
            let self = this
            let cmr = plus.camera.getCamera();//获取摄像头管理对象
            let res = cmr.supportedImageResolutions[0];//字符串数组，摄像头支持的拍照分辨率
            let fmt = cmr.supportedImageFormats[0];//字符串数组，摄像头支持的拍照文件格式
            cmr.captureImage(function(path){
                plus.io.resolveLocalFileSystemURL(path,function(entry){
                    let tmpPath= entry.toLocalURL();//获取目录路径转换为本地路径URL地址
                    self.img1 = tmpPath
                    Toast(self.img1)
                })
            },function(error){
                Toast(`失败${error.message}`)
            },{resolution:res,format:fmt})
        },
        //返回到我的收入页面
        returnParent(){
            this.$router.push({
                name:"income",
                params:{incomeId:'1111'}
            });
        }
    }
}
</script>

<style scoped>
.identity-box{
    padding: .8rem;
    margin-bottom: 3rem;
}
.van-uploader{
    width: 100%;
}
.identity1{
    width: 100%;
    display: block;
}
.zxj{
    position: absolute;
    width: 1.5rem;
    left: calc(50% - .75rem);
    bottom: -.25rem;
}
.zhengmian{
    display: block;
    line-height: 2rem;
}
.zhengmian1{
    display: block;
    line-height: .7rem;
}
.file-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    z-index: 1;
    opacity: 0;
}
.file-box1{
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    font-size: 0;
    z-index: 99;
    opacity: 0;
}
.xiangji{
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    display: block;
    padding: .4rem;
    font-size: .8rem;
}
</style>
